import { defineStore } from 'pinia'

import piniaStore from '../index'
import { LayoutType, AppState } from '../interface'
import { getPageTitle } from '@/utils/get-title'

export const useAppStore = defineStore({
  id: 'geek-app',
  state: (): {
    // 布局
    layout: LayoutType
    // 侧边导航栏是否收缩
    sidebarOpened: boolean
    // 折叠效果
    accordion: boolean
    // 面包屑导航
    breadcrumb: boolean
    // 面包屑导航图标
    breadcrumbIcon: boolean
    // 标签页
    tabs: boolean
    // 标签页图标
    tabsIcon: boolean
    // 页脚
    footer: boolean
    // 系统标题
    title: string
    // 主题颜色
    primary: string
    // 暗黑模式
    isDark: boolean
  } => {
    return {
      // 布局
      layout: 'vertical',
      // 主题颜色
      primary: '#009688',
      // 暗黑模式
      isDark: false,
      // 侧边导航栏是否收缩
      sidebarOpened: true,
      // 折叠效果
      accordion: true,
      // 面包屑导航
      breadcrumb: true,
      // 面包屑导航图标
      breadcrumbIcon: true,
      // 标签页
      tabs: true,
      // 标签页图标
      tabsIcon: true,
      // 页脚
      footer: true,
      // 系统标题
      title: getPageTitle() || '体育考试系统'
    }
  },
  // 这个配置代表存储生效，而且是整个store都存储
  persist: true,
  getters: {
    getSidebarOpened(): boolean {
      return this.sidebarOpened
    }
  },
  actions: {
    /**
     * 侧边栏收缩
     */
    triggerSidebarOpened() {
      this.sidebarOpened = !this.sidebarOpened
    },
    // Set GlobalState
    setGlobalState(...args: ObjToKeyValArray<AppState>) {
      this.$patch({ [args[0]]: args[1] })
    }
  }
})

export function useAppStoreHook() {
  return useAppStore(piniaStore)
}
